<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Form 表单1</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.ant-space-item{
	margin-left: 20px;
}
</style>
<body>

<div id="app">
	<a-affix :offset-top="10"><div id="form_links"></div></a-affix><script src="links.js"></script><script>form_link();</script>
	
	<a-divider class="a-divi" orientation="left">基本使用</a-divider><!-- =============================================================== -->
	<p class="desc">基本的表单数据域控制展示，包含布局、初始化、验证、提交。</p>
	<a-form :model="formState1" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
		@finish="onFinish1" @finish-Failed="onFinishFailed1" style="width: 500px;">
		<a-form-item label="Username" name="username" :rules="[{ required: true, message: '用户名必填!' }]">
			<a-input v-model:value="formState1.username"></a-input>
		</a-form-item>
	
		<a-form-item label="Password" name="password" :rules="[{ required: true, message: '密码必填!' }]">
			<a-input-password v-model:value="formState1.password"></a-input-password>
		</a-form-item>
	
		<a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
			<a-checkbox v-model:checked="formState1.remember">Remember me</a-checkbox>
		</a-form-item>
	
		<a-form-item :wrapper-col="{ offset: 8, span: 16 }">
			<a-button type="primary" html-type="submit">Submit</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">固定 Label 宽度</a-divider><!-- =============================================================== -->
	<p class="desc">通过 labelCol.style 设置固定宽度</p>
	<a-form :model="formState2" :label-col="labelCol2" :wrapper-col="wrapperCol2" style="width: 800px;">
		<a-form-item label="Activity name">
			<a-input v-model:value="formState2.name" />
		</a-form-item>
		<a-form-item label="Instant delivery">
			<a-switch v-model:checked="formState2.delivery" />
		</a-form-item>
		<a-form-item label="Activity type">
			<a-checkbox-group v-model:value="formState2.type">
				<a-checkbox value="1" name="type">Online</a-checkbox>
				<a-checkbox value="2" name="type">Promotion</a-checkbox>
				<a-checkbox value="3" name="type">Offline</a-checkbox>
			</a-checkbox-group>
		</a-form-item>
		<a-form-item label="Resources">
			<a-radio-group v-model:value="formState2.resource">
				<a-radio value="1">Sponsor</a-radio>
				<a-radio value="2">Venue</a-radio>
			</a-radio-group>
		</a-form-item>
		<a-form-item label="Activity form">
			<a-textarea v-model:value="formState2.desc" />
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
			<a-button type="primary" @click="onSubmit2">Create</a-button>
			<a-button style="margin-left: 10px">Cancel</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">内联登录栏</a-divider><!-- =============================================================== -->
	<p class="desc">水平登录栏，常用在顶部导航栏中。</p>
	<a-form layout="inline" :model="formState3" @finish="onFinish1" @finishFailed="onFinishFailed1" style="margin-left: 20px;">
		<a-form-item name="user">
			<a-input v-model:value="formState3.user" placeholder="Username">
				<template #prefix>
					<User-Outlined style="color: rgba(0, 0, 0, 0.25);width: 1.2em;height: 1.2em;"></User-Outlined>
				</template>
			</a-input>
		</a-form-item>
		<a-form-item name="password">
			<a-input v-model:value="formState3.password" type="password" placeholder="Password">
				<template #prefix>
					<Lock-Outlined style="color: rgba(0, 0, 0, 0.25);width: 1.2em;height: 1.2em;"></Lock-Outlined>
				</template>
			</a-input>
		</a-form-item>
		<a-form-item>
			<a-button type="primary" html-type="submit" :disabled="formState3.user === '' || formState3.password === ''">
				Log in
			</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">表单布局</a-divider><!-- =============================================================== -->
	<p class="desc">表单有三种布局。</p>
	<a-form :layout="formState4.layout" :model="formState4" v-bind="formItemLayout4" style="margin-left: 20px;width: 1000px;">
		<a-form-item label="Form Layout">
			<a-radio-group v-model:value="formState4.layout">
				<a-radio-button value="horizontal">Horizontal</a-radio-button>
				<a-radio-button value="vertical">Vertical</a-radio-button>
				<a-radio-button value="inline">Inline</a-radio-button>
			</a-radio-group>
		</a-form-item>
		<a-form-item label="Field A">
			<a-input v-model:value="formState4.fieldA" placeholder="input placeholder" />
		</a-form-item>
		<a-form-item label="Field B">
			<a-input v-model:value="formState4.fieldB" placeholder="input placeholder" />
		</a-form-item>
		<a-form-item :wrapper-col="buttonItemLayout4.wrapperCol">
			<a-button type="primary">Submit</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">表单禁用</a-divider><!-- =============================================================== -->
	<p class="desc">设置表单组件禁用，仅对 antd 组件有效。</p>
	<a-checkbox :checked="componentDisabled5" @change="e => (componentDisabled5 = e.target.checked)" style="margin-left: 20px;">
		Form disabled
	</a-checkbox>
	<a-form :label-col="labelCol5" :wrapper-col="wrapperCol5" layout="horizontal" :disabled="componentDisabled5" style="max-width: 600px">
		<a-form-item label="Checkbox">
			<a-checkbox>checkbox</a-checkbox>
		</a-form-item>
		<a-form-item label="Radio">
			<a-radio-group v-model:value="radioValue5">
				<a-radio value="apple">Apple</a-radio>
				<a-radio value="pear">Pear</a-radio>
			</a-radio-group>
		</a-form-item>
		<a-form-item label="Input">
			<a-input></a-input>
		</a-form-item>
		<a-form-item label="Select">
			<a-select>
				<a-select-option value="demo">Demo</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="TreeSelect">
			<a-tree-select :tree-data="treeData5" />
		</a-form-item>
		<a-form-item label="Cascader">
			<a-cascader :options="options5" />
		</a-form-item>
		<a-form-item label="DatePicker">
			<a-date-picker />
		</a-form-item>
		<a-form-item label="RangePicker">
			<a-range-picker />
		</a-form-item>
		<a-form-item label="InputNumber">
			<a-input-number />
		</a-form-item>
		<a-form-item label="TextArea">
			<a-textarea :rows="4" />
		</a-form-item>
		<a-form-item label="Switch">
			<a-switch v-model:checked="checked5" />
		</a-form-item>
		<a-form-item label="Upload">
			<a-upload action="/upload.do" list-type="picture-card">
				<div>
					<Plus-Outlined class="ant-icon"></Plus-Outlined>
					<div style="margin-top: 8px">Upload</div>
				</div>
			</a-upload>
		</a-form-item>
		<a-form-item label="Button">
			<a-button>Button</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">内联登录栏</a-divider><!-- =============================================================== -->
	<p class="desc">内联登录栏，常用在顶部导航栏中。</p>
	<a-form :model="formState6" name="horizontal_login" layout="inline" autocomplete="off" style="margin-left: 20px;"
		@finish="onFinish1" @finishFailed="onFinishFailed1">
		<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
			<a-input v-model:value="formState6.username">
				<template #prefix>
					<User-Outlined class="ant-icon"></User-Outlined>
				</template>
			</a-input>
		</a-form-item>
	
		<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
			<a-input-password v-model:value="formState6.password">
				<template #prefix>
					<Lock-Outlined class="ant-icon"></Lock-Outlined>
				</template>
			</a-input-password>
		</a-form-item>
	
		<a-form-item>
			<a-button :disabled="disabled6" type="primary" html-type="submit">Log in</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">登录框</a-divider><!-- =============================================================== -->
	<p class="desc">普通的登录框，可以容纳更多的元素。</p>
	<a-space>
		<a-form :model="formState7" name="normal_login" class="login-form" @finish="onFinish1" @finishFailed="onFinishFailed1">
			<a-form-item label="Username" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
				<a-input v-model:value="formState7.username">
					<template #prefix>
						<User-Outlined class="ant-icon"></User-Outlined>
					</template>
				</a-input>
			</a-form-item>
		
			<a-form-item label="Password" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
				<a-input-password v-model:value="formState7.password">
					<template #prefix>
						<Lock-Outlined class="ant-icon"></Lock-Outlined>
					</template>
				</a-input-password>
			</a-form-item>
		
			<a-form-item>
				<a-form-item name="remember" no-style>
					<a-checkbox v-model:checked="formState7.remember">Remember me</a-checkbox>
				</a-form-item>
				<a class="login-form-forgot" href="">Forgot password</a>
			</a-form-item>
		
			<a-form-item>
				<a-button :disabled="disabled7" type="primary" html-type="submit" class="login-form-button"> Log in </a-button>
				Or <a href="">register now!</a>
			</a-form-item>
		</a-form>
	</a-space>
	
	<a-divider class="a-divi" orientation="left">表单验证</a-divider><!-- =============================================================== -->
	<p class="desc">Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 FormItem 的 name 属性设置为需校验的字段名即可。校验规则参见 async-validator</p>
	<a-form ref="formRef8" :model="formState8" :rules="rules8" :label-col="labelCol8" :wrapper-col="wrapperCol8" style="width: 1000px;">
		<a-form-item ref="name" label="活动名称" name="name">
			<a-input v-model:value="formState8.name" />
		</a-form-item>
		<a-form-item label="活动区域" name="region">
			<a-select v-model:value="formState8.region" placeholder="please select your zone">
				<a-select-option value="shanghai">Zone one</a-select-option>
				<a-select-option value="beijing">Zone two</a-select-option>
			</a-select>
		</a-form-item>
		<a-form-item label="活动时间" required name="date1">
			<a-date-picker v-model:value="formState8.date1" show-time type="date" placeholder="Pick a date"
				style="width: 100%" />
		</a-form-item>
		<a-form-item label="即时交付" name="delivery">
			<a-switch v-model:checked="formState8.delivery" />
		</a-form-item>
		<a-form-item label="活动类型" name="type">
			<a-checkbox-group v-model:value="formState8.type">
				<a-checkbox value="1" name="type">Online</a-checkbox>
				<a-checkbox value="2" name="type">Promotion</a-checkbox>
				<a-checkbox value="3" name="type">Offline</a-checkbox>
			</a-checkbox-group>
		</a-form-item>
		<a-form-item label="资源" name="resource">
			<a-radio-group v-model:value="formState8.resource">
				<a-radio value="1">Sponsor</a-radio>
				<a-radio value="2">Venue</a-radio>
			</a-radio-group>
		</a-form-item>
		<a-form-item label="活动介绍" name="desc">
			<a-textarea v-model:value="formState8.desc" />
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
			<a-button type="primary" @click="onSubmit8">Create</a-button>
			<a-button style="margin-left: 10px" @click="resetForm8">Reset</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">自定义校验规则</a-divider><!-- =============================================================== -->
	<p class="desc">这个例子中展示了如何使用自定义验证规则来完成密码的二次验证。</p>
	<p class="desc">本例还使用 has-feedback 属性为输入框添加了表示校验结果的反馈图标。 更多高级用法可参考 async-validator</p>
	<a-form ref="formRef9" :model="formState9" name="custom-validation" :rules="rules9" v-bind="layout9" @validate="handleValidate9"
		@finish="onFinish1" @finishFailed="onFinishFailed1" style="width: 1000px;">
		<a-form-item has-feedback label="Password" name="pass">
			<a-input v-model:value="formState9.pass" type="password" autocomplete="off"></a-input>
		</a-form-item>
		<a-form-item has-feedback label="Confirm" name="checkPass">
			<a-input v-model:value="formState9.checkPass" type="password" autocomplete="off"></a-input>
		</a-form-item>
		<a-form-item has-feedback label="Age" name="age">
			<a-input-number v-model:value="formState9.age"></a-input-number>
		</a-form-item>
		<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
			<a-button type="primary" html-type="submit">Submit</a-button>
			<a-button style="margin-left: 10px" @click="resetForm9">Reset</a-button>
		</a-form-item>
	</a-form>
	
	<a-divider class="a-divi" orientation="left">动态增减表单项</a-divider><!-- =============================================================== -->
	<p class="desc">动态增加、减少表单项。</p>
	<a-form ref="formRef10" :model="formState10" name="dynamic_form_item" v-bind="formItemLayoutWithOutLabel10" style="width: 1000px;">
		<a-form-item v-for="(domain, index) in formState10.domains" v-bind="formItemLayout10" :label="index === 0 ? 'Domains' : `New${index}`"
			:key="domain.key" :name="['domains', index, 'value']" :rules="{ required: true, message: 'domain can not be null', trigger: 'change', }">
			<a-input v-model:value="domain.value" placeholder="please input domain" style="width: 60%; margin-right: 8px"></a-input>
			<Minus-Circle-Outlined v-if="formState10.domains.length > 1" class="ant-icon" @click="removeDomain10(domain)"></Minus-Circle-Outlined>
		</a-form-item>
		<a-form-item v-bind="formItemLayoutWithOutLabel10">
			<a-button type="dashed" style="width: 60%" @click="addDomain10">
				<Plus-Outlined class="ant-icon"></Plus-Outlined> Add field
			</a-button>
		</a-form-item>
		<a-form-item v-bind="formItemLayoutWithOutLabel10">
			<a-button type="primary" html-type="submit" @click="submitForm10">Submit</a-button>
			<a-button style="margin-left: 10px" @click="resetForm10">Reset</a-button>
		</a-form-item>
	</a-form>
	
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		fileIndex: 1,
		
		formState1: {
			username: '',
			password: '',
			remember: true,
		},
		
		formState2: {
			name: '',
			delivery: false,
			type: [],
			resource: '',
			desc: '',
		},
		labelCol2: {style: {width: '150px'}},
		wrapperCol2: {span: 14},
		
		formState3: {user: '', password: ''},
		
		formState4: {layout: 'horizontal', fieldA: '', fieldB: '',},
		
		componentDisabled5: true,
		labelCol5: { style: { width: '150px' } },
		wrapperCol5: { span: 14 },
		radioValue5: 'apple',
		treeData5: [
			{ title: 'Light', value: 'light', children: [{ title: 'Bamboo', value: 'bamboo' }] },
		],
		options5: [
			{value: 'zhejiang',label: 'Zhejiang',
				children: [
					{value: 'hangzhou',label: 'Hangzhou',},
				],
			}
		],
		checked5: false,
		
		formState6: {username: '', password: '',},
		
		formState7: {username: '', password: '', remember: true,},
		
		labelCol8: { span: 5 },
		wrapperCol8: { span: 13 },
		formState8: {name: '',region: undefined,date1: undefined,delivery: false,type: [],resource: '',desc: '',},
		rules8: {
			name: [
				{ required: true, trigger: 'change', message: '活动名称必填' },
				{ min: 3, max: 5, trigger: 'blur', message: '长度必须是3-5' },
			],
			region: [
				{ required: true, trigger: 'change', message: '活动区域必填' },
			],
			date1: [
				{ required: true, trigger: 'change', message: '活动时间必填', type: 'object' },
			],
			type: [
				{ required: true, trigger: 'change', message: '请至少选择一种活动类型', type: 'array',},
			],
			resource: [
				{ required: true, trigger: 'change', message: '资源必需选择' },
			],
			desc: [
				{ required: true, trigger: 'blur', message: '活动介绍必须填写' },
			],
		},
		
		formState9: {pass: '', checkPass: '', age: undefined,},
		rules9: {
			pass: [
				// 简化写法中，这里的this.validate_pass9会找不到，可以参考：/oa/app201/chain/view/sale/input.html 中的写法
				{ required: true, trigger: 'change', validator: this.validate_pass9 },
			],
			checkPass: [
				{ required: true, trigger: 'change', validator: this.validate_checkPass9 },
			],
			age: [
				{ required: true, trigger: 'change', validator: this.validate_age9 },
			],
		},
		layout9: {
			labelCol: { span: 4 },
			wrapperCol: { span: 14 },
		},
		
		formState10: {domains: [],},
		formItemLayout10: {
			labelCol: {xs: { span: 24 },sm: { span: 4 },},
			wrapperCol: {xs: { span: 24 },sm: { span: 20 },},
		},
		formItemLayoutWithOutLabel10: {
			wrapperCol: {xs: { span: 24, offset: 0 }, sm: { span: 20, offset: 4 },},
		},
		
		
	}
},
computed: {
	btn(){
		return function(i){
			return this.fileIndex == i ? "layui-btn" : "layui-btn0";
		}
	},
	formItemLayout4(){
		return this.formState4.layout === 'horizontal' ? {labelCol: { span: 4 }, wrapperCol: { span: 14 },} : {};
	},
	buttonItemLayout4(){
		return this.formState4.layout === 'horizontal' ? {wrapperCol: { span: 14, offset: 4 },} : {};
	},
	
	disabled6(){
		return !(this.formState6.username && this.formState6.password);
	},
	
	disabled7(){
		return !(this.formState7.username && this.formState7.password);
	},
	
},
methods:{
	onFinish1(values){
		console.log('onFinish1 Success:', values);
	},
	onFinishFailed1(errorInfo){
		console.log('onFinishFailed1:', errorInfo);
	},
	
	onSubmit2(){
		console.log('onSubmit2', Vue.toRaw(this.formState2));
	},
	
	onSubmit8(){
		this.$refs.formRef8.validate().then(() => {
			console.log('values', this.formState8, Vue.toRaw(this.formState8));
		}).catch(error => {
			console.log('error', error);
		});
	},
	resetForm8(){
		this.$refs.formRef8.resetFields();
	},
	
	resetForm9(){
		this.$refs.formRef9.resetFields();
	},
	handleValidate9(...args){
		console.log('handleValidate9', args);
	},
	validate_pass9(rule, value, callback){
		console.log('validate_pass9', rule, value, callback);
		if (value === '') {
			return callback('密码必填！9');
			// return Promise.reject('密码必填！');
		} else {
			if (this.formState9.checkPass !== '') {
				this.$refs.formRef9.validateFields('checkPass');
			}
			return callback();	// Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应。https://github.com/ant-design/ant-design/issues/5155
			// return Promise.resolve();
		}
	},
	validate_checkPass9(rule, value, callback){
		console.log('validate_checkPass9', rule, value, callback);
		if (value === '') {
			return callback('请再次输入密码');
		} else if (value !== this.formState9.pass) {
			return callback("两次密码不一致!");
		} else {
			return callback();
		}
	},
	validate_age9(rule, value, callback){
		console.log('validate_age9', rule, value, callback);
		if (!value) {
			return callback('请输入年龄');
		}
		if (!Number.isInteger(value)) {
			return callback('请输入数字');
		} else {
			if (value < 18) {
				return callback('年龄必须大于18');
			} else {
				return callback();
			}
		}
	},
	
	submitForm10(){
		this.$refs.formRef10.validate().then(() => {
			console.log('submitForm10', this.formState10.domains);
		}).catch(error => {
			console.log('error', error);
		});
	},
	resetForm10(){
		this.$refs.formRef10.resetFields();
	},
	removeDomain10(item){
		const index = this.formState10.domains.indexOf(item);
		if (index !== -1) {
			this.formState10.domains.splice(index, 1);
		}
	},
	addDomain10(){
		this.formState10.domains.push({value: '', key: Date.now(),});
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
